<template>
	<view class="wrapper">
		<view class="station-name">{{stationInfo.name}}</view>

		<view class="region-info">
			<view class="inner">
				<u-image src="/static/station_info/location.png" width="32" height="32" mode="aspectFit" />
				<span>{{stationInfo.city}}</span>
			</view>
		</view>

		<view class="ext-info">
			<view class="item-info">
				<view class="item-top">
					<u-image src="/static/station_info/ext_info_0.png" width="32" height="32" />
					<view>装机容量</view>
				</view>
				<view class="item-bottom">
					{{parseFloat(stationInfo.zjrl)}}KW
				</view>
			</view>
			<view class="item-info">
				<view class="item-top">
					<u-image src="/static/station_info/ext_info_1.png" width="32" height="32" />
					<view>并网日期</view>
				</view>
				<view class="item-bottom">{{stationInfo.work_date || '-'}}</view>
			</view>
		</view>

		<view class="power-block">
			<view class="daily-power">
				<view class="decoration-block">
					<u-image src="/static/station_info/icon_flashing.png" width="32" height="32" />
					<view>当日发电</view>
				</view>
				<view class="data-block">{{parseFloat(stationInfo.drfdl).toFixed(2)}}kWh</view>
			</view>
			<view class="bottom-block">
				<view>
					<view class="item-block">
						<u-image src="/static/station_info/power_0.png" width="32" height="32" />
						<view class="txt">当月发电</view>
					</view>
					<view class="data-block">{{(parseFloat(stationInfo.dyfdl)/1000).toFixed(2)}} MWh</view>
				</view>
				<view>
					<view class="item-block">
						<u-image src="/static/station_info/power_1.png" width="32" height="32" />
						<view class="txt">累计发电</view>
					</view>
					<view class="data-block">
						{{(parseFloat(stationInfo.nbqzdl)/1000).toFixed(2)}}MWh
					</view>
				</view>
			</view>
		</view>
		<view class="image-block">
			<view class="first-line">
				<u-image src="/static/station_info/img_0.png" width="96" height="96" />
				<view class="line">
					<view :class="['dot',{'active':item === currentIndex}]" v-for="item in [1,2,3]" :key="item"></view>
				</view>
				<circle-block></circle-block>
				<view class="line">
					<view :class="['dot',{'active':item === currentIndex}]" v-for="item in [4,5,6]" :key="item"></view>
				</view>
				<u-image src="/static/station_info/img_2.png" width="96" height="96" />
			</view>
			<view class="second-line">
				<view class="cell" style="width:106upx"></view>
				<view class="cell">当前功率:{{parseFloat(stationInfo.ssgl).toFixed(2)}}KW</view>
				<view class="cell" style="display: flex;justify-content: flex-end;">
					<view class="warning-block" @click="goDetail(stationInfo)">
						<u-image src="/static/station_info/notice.png" width="32" height="32" />
						<view class="num">
							{{parseInt(stationInfo.yx_alm_num) + parseInt(stationInfo.tx_alm_num) + parseInt(stationInfo.lj_alm_num)}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-gap height="20" bg-color="#F7F8FA" />

		<ucharts-block ref="chartBlock" :station-id="stationInfo.id" />

		<u-gap height="20" bg-color="#F7F8FA" />

		<view class="equipment-block">
			<view class="header-block">
				<view class="block-title">
					<u-image src="/static/station_info/icon_equipment.png" width="38" height="38" />
					<view class="txt">我的设备</view>
				</view>
				<view class="btn-switch">
					<view>全部</view>
					<u-switch size="30" v-model="checked" @change="doSearch"></u-switch>
					<view>异常</view>
				</view>
				<view @click="toggerSearch">
					<u-icon name="search"></u-icon>
					<span style="color:#999;margin-left:10upx;">{{showSearch?'取消搜索':'搜索设备'}}</span>
				</view>
			</view>
			<view class="search-block" v-show="showSearch">
				<u-search placeholder="请输入设备名称" v-model="keyword" @clear="doSearch" @search="doSearch"
					@custom="doSearch" />
			</view>
			<view v-if="deviceList.length > 0">
				<view v-for="(item,index) in deviceList" :key="index" v-if="!hideMore || index < 3">
					<navigator hover-class="none"
						:url="`/pages/equipment_detail/index?stationId=${stationInfo.id}&equipmentInfo=${JSON.stringify(item)}`">
						<view class="item-block">
							<view class="left">
								<u-image src="/static/station_info/equipment.png" width="80" height="80" />
							</view>
							<view class="right">
								<view class="title-block">
									<view class="title">{{item.name}}</view>
									<!-- 设备状态：//0-正常 1-待机 2-低效 3-通信中断 4-其他 -->
									<!-- {{item.status = "4"}} -->
									<view class="tag" style="color: #4290F2;" v-if="item.status === '0'">正常</view>
									<view class="tag" style="color: #6312aa;" v-if="item.status === '1'">待机</view>
									<view class="tag" style="color: #ffaa00;" v-if="item.status === '2'">低效</view>
									<view class="tag" style="color: #ff0000;" v-if="item.status === '3'">通信中断</view>
									<view class="tag" style="color: #34344e;" v-if="item.status === '4'">其他</view>
								</view>
								<view class="info-block">
									<view>
										功率:
										{{parseFloat(item.bwyg_value.substring(0,item.bwyg_value.indexOf('@'))).toFixed(2)}}
										KW
									</view>
									<view>
										日电量:
										{{parseFloat(item.rfdl_value.substring(0,item.rfdl_value.indexOf('@'))).toFixed(2)}}
										KWh
									</view>
									<view>满发小时:{{calcUsingHours(item)}}</view>
								</view>
							</view>
						</view>
					</navigator>
				</view>
				<view class="more-block" v-if="hideMore && deviceList.length > 3" @click="showMoreDevice">
					<view>加载更多</view>
					<u-image src="/static/station_info/more.png" width="32" height="32" />
				</view>
				<view class="more-block" v-if="!hideMore" @click="hideMoreDevice">
					<view>隐藏更多</view>
					<u-image src="/static/station_info/more.png" style="transform: rotate(180deg)" width="32"
						height="32" />
				</view>
			</view>
			<u-empty v-else></u-empty>
		</view>

		<u-gap height="20" bg-color="#F7F8FA" />

		<env-block :data="stationInfo.nbqzdl" />

	</view>
</template>

<script>
	import uchartsBlock from '../../components/ucharts-block'
	import envBlock from '../../components/env-block.vue'
	import circleBlock from '../../components/circle-block.vue'
	var myInterval = null
	export default {
		components: {
			uchartsBlock,
			envBlock,
			circleBlock
		},
		data() {
			return {
				searchStyle: {
					'width': '100px'
				},
				stationInfo: {},
				deviceList: [],
				tempDeviceList: [],
				hideMore: true,
				currentIndex: 1,
				keyword: null,
				showSearch: false,
				checked: false
			}
		},
		onPullDownRefresh() {
			this.$refs.chartBlock.loadChartInfo()
			this.loadDeviceList()
			this.loadStationDetail()
		},
		onLoad(options) {
			this.currentDate = this.$u.timeFormat(new Date(), 'yyyy-mm-dd')
			this.stationInfo = JSON.parse(options.stationInfo)
			myInterval = setInterval(() => {
				this.currentIndex = this.currentIndex % 6 + 1
			}, 1000)
		},
		onUnload() {
			if (myInterval) clearInterval(myInterval)
		},
		onReady() {
			this.$refs.chartBlock.loadChartInfo()
			this.loadDeviceList()
		},
		methods: {
			toggerSearch() {
				this.showSearch = !this.showSearch
				if (!this.showSearch) {
					this.keyword = null
					this.deviceList = JSON.parse(JSON.stringify(this.tempDeviceList))
				}
			},
			calcUsingHours(item) {
				if (item.actual_capacity === null || item.actual_capacity === undefined || item.actual_capacity === '' ||
					item.actual_capacity === '0') return 0

				let rfdl_value = item.rfdl_value.substring(0, item.rfdl_value.indexOf('@'))
				let rfdl_val = parseFloat(rfdl_value)
				let actual_capacity = parseFloat(item.actual_capacity)
				return (rfdl_val / actual_capacity).toFixed(2)
			},
			/**
			 * 后端接口写的跟屎一样，这里没有查询详情的接口，只能查询所有列表
			 */
			loadStationDetail() {
				this.$u.api.getStationList().then(res => {
					if (res.error_code === 0 && res.data) {
						let matchList = res.data.find(item => item.id === this.stationInfo.id)
						// console.log(matchList)
						this.stationInfo = matchList
					}
				}).finally(() => {
					uni.stopPullDownRefresh()
					uni.hideLoading()
				})
			},
			/**
			 * 获取设备
			 */
			loadDeviceList() {
				this.$u.api.getDeviceList({
					stationId: this.stationInfo.id
				}).then(res => {
					this.deviceList = res
					this.tempDeviceList = res
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			showMoreDevice() {
				this.hideMore = false
			},
			hideMoreDevice() {
				this.hideMore = true
			},
			goDetail(stationInfo) {
				let count = parseInt(stationInfo.yx_alm_num) + parseInt(stationInfo.tx_alm_num) + parseInt(stationInfo
					.lj_alm_num)
				if (count > 0) {
					uni.setStorageSync('warning_station', {
						id: stationInfo.id,
						name: stationInfo.name
					})
					uni.switchTab({
						url: '../warning/index'
					})
				}
			},
			doSearch() {
				if (this.keyword || this.checked) {
					let result = this.tempDeviceList
					if (this.keyword) {
						result = this.tempDeviceList.filter(item => item.name.toLowerCase().indexOf(this.keyword
							.toLowerCase()) !== -1)
					}
					if (this.checked) {
						result = result.filter(item => item.status != '0')
					}
					this.deviceList = result
				} else {
					this.deviceList = JSON.parse(JSON.stringify(this.tempDeviceList))
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 20upx 0;

		.station-name {
			font-weight: bold;
			font-size: 32upx;
			color: #333;
			text-align: center;
		}

		.region-info {
			display: flex;
			justify-content: center;
			margin-top: 32upx;

			.inner {
				width: 156upx;
				height: 60upx;
				background: #EBEBEB;
				border-radius: 30upx;
				font-size: 24upx;
				font-weight: 400;
				color: #666;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30upx;
			}
		}

		.ext-info {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24upx;
			margin-top: 18upx;

			.item-info {
				margin: 0 74upx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.item-top {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #999;
				}

				.item-bottom {
					color: #666;
					margin-top: 6upx;
				}
			}
		}

		.power-block {
			margin: 20upx 40upx 0 40upx;
			height: 300upx;
			background: #445365;
			border-radius: 20upx;
			padding: 26upx 20upx;
			box-sizing: border-box;

			.daily-power {
				color: #fff;
				margin-top: 26upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.decoration-block {
					display: flex;
					align-items: center;
					font-size: 24upx;
				}

				.data-block {
					font-size: 36upx;
					margin-top: 10upx;
				}
			}

			.bottom-block {
				padding: 32upx 40upx 0 40upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24upx;
				color: #fff;

				.item-block {
					display: flex;
					align-items: center;
					justify-content: left;

					.txt {
						margin-left: 10upx;
					}
				}

				.data-block {
					margin-top: 8upx;
				}
			}
		}

		.image-block {
			padding-bottom: 34upx;

			.first-line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 28upx 86upx 22upx;

				.line {
					display: flex;

					.dot {
						margin: 0 6upx;
						border-radius: 50%;
						width: 12upx;
						height: 12upx;
						background: #ccc;
						opacity: 0.9;
					}

					.active {
						background: #5cb85c;
					}
				}
			}

			.second-line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24upx;
				color: #666;
				padding: 0 40upx;

				.cell {
					text-align: center;
				}

				.warning-block {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20upx;
					width: 106upx;
					height: 48upx;
					background: #F7F6F4;
					border-radius: 24upx;

					.num {
						font-size: 24upx;
						color: #FA8B53;
					}
				}
			}
		}

		.equipment-block {
			padding: 30upx 0;

			.header-block {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32upx;
			}

			.search-block {
				padding: 20upx 32upx;
			}

			.item-block {
				padding: 0 32upx;
				display: flex;
				align-items: center;
				border-bottom: 1upx solid #ebebeb;

				.left {
					width: 100upx;
				}

				.right {
					margin-left: 22upx;
					width: 100%;
					padding: 25upx 0 28upx 0;

					.title-block {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title {
							font-size: 30upx;
							font-weight: 400;
							color: #333;
						}

						.tag {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 4upx 10upx;
							height: 42upx;
							background: rgba(66, 144, 242, .1);
							border-radius: 21upx;
							font-size: 28upx;
							font-weight: 400;
							line-height: 40upx;
						}
					}

					.info-block {
						font-size: 24upx;
						color: #999;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 16upx;
						flex-wrap: wrap;
					}
				}
			}

			.more-block {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
				font-size: 24upx;
				padding-top: 24upx;
			}
		}

		.env-block {
			padding: 30upx 32upx;

			.env-items {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28upx;
				padding: 0 42upx;

				.item-block {
					display: flex;
					flex-direction: column;
					align-items: center;

					.value-block {
						font-size: 30upx;
						font-weight: bold;
						color: #4290F2;
						margin-top: 10upx;
					}

					.unit-name {
						font-size: 24upx;
						font-weight: 400;
						color: #999999;
						margin-top: 10upx;
						text-align: center;
					}
				}
			}
		}

		.block-title {
			display: flex;
			align-items: center;

			.txt {
				margin-left: 10upx;
				font-weight: 400;
				font-size: 28upx;
				color: #999;
			}
		}

		.btn-switch {
			display: flex;
			align-items: center;
			width: 200upx;
			justify-content: space-between;
			font-size: 22upx;
			color: #666;
		}
	}
</style>
